<template>
	<div id="data2">
		<div style="margin: 15px 0;">
			<el-input placeholder="请输入内容" v-model="input5">
				<el-select v-model="select" slot="prepend" placeholder="请选择">
					<el-option label="所属区域" value="area"></el-option>
					<el-option label="告警状态" value="alarmState"></el-option>
					<el-option label="门锁名称" value="name"></el-option>
					<el-option label="告警时间" value="alarmTime"></el-option>
				</el-select>
				<el-button slot="append" icon="search" @click="search"></el-button>
			</el-input>
		</div>
		<el-table :data="tableData" border style="width: 100%" v-loading="loading"
    element-loading-text="拼命加载中">
			<el-table-column prop="name" label="门锁名称"></el-table-column>
			<el-table-column prop="area" label="所属区域"></el-table-column>
			<el-table-column prop="alarmTime" label="告警时间"></el-table-column>
			<el-table-column prop="alarmReason" label="告警原因"></el-table-column>
			<el-table-column prop="alarmState" label="告警状态"></el-table-column>
			<el-table-column prop="recoverTime" label="恢复时间"></el-table-column>
			<el-table-column prop="log" label="记录来源"></el-table-column>
		</el-table>
		<!-- 分页器 -->
		<div class="block pagination">
			<!-- <span class="demonstration">直接前往</span> -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage4" :page-size="10" layout="total, prev, pager, next, jumper" :total="tableData.length">
			</el-pagination>
		</div>
	</div>
</template>

<script>
export default {
	data(){
		return {
			input5: '',
			select: '',
			currentPage4: 1,
			loading:true,
			tableData:[
				{
					name: '门锁名称1',
					area: '广州(第一页)',
					alarmTime: '2016-05-03',
					alarmReason: '不详',
					alarmState: '未知',
					recoverTime: '2016-05-03',
					log: '无语'
				},
				{
					name: '门锁名称1',
					area: '广州(第一页)',
					alarmTime: '2016-05-03',
					alarmReason: '不详',
					alarmState: '未知',
					recoverTime: '2016-05-03',
					log: '无语'
				},
				{
					name: '门锁名称1',
					area: '广州(第一页)',
					alarmTime: '2016-05-03',
					alarmReason: '不详',
					alarmState: '未知',
					recoverTime: '2016-05-03',
					log: '无语'
				}
			]
		}
	},
	methods:{
		search() {
			alert(this.select + "查找中...")
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
		},
	},
	mounted(){
		var self=this;
		setTimeout(function(){
			self.loading=false
		},5000)
	}	
}
</script>



<style>
.el-select .el-input {
	width: 110px;
}
#data2 div{
	text-align: center;
}
#data2 .pagination {
	margin: 30px 0;
}
</style>